<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组织机构管理</title>
		<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css" />
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				height: 100vh;
			}

			.mb20 {
				margin-bottom: 20px;
			}

			.table {
				margin-bottom: 0;
			}

			.page-nav {
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 路径导航 -->
			<ol class="breadcrumb">
				<li>首页{{isCheckedAll}}</li>
				<li class="active">{{pageName}}</li>

			</ol>

			<!-- 工具栏 -->
			<div class="container-fluid mb20">
				<form class="form-inline">
					<div class="form-group">
						<input type="text" placeholder="组织结构名称" class="form-control" v-model="searchForm.orgname">
					</div>
					<div class="form-group">
						<select class="form-control" v-model="searchForm.exetype">
							<option value="" disabled selected>--行政类别--</option>
							<option value="1">卫生监督机构</option>
							<option value="2">行政部门</option>
							<option value="3">协作单位</option>
						</select>
					</div>
					<div class="form-group btn-group">
						<button type="button" class="btn btn-primary" @click="find"><span class="glyphicon glyphicon-search">搜索</span>
							</button>
						<button type="button" class="btn btn-default" @click="clearSearch"><span class="glyphicon glyphicon-erase">清空</span>
							</button>
					</div>
					<div class="form-group btn-group">
						<button type="button" class="btn btn-primary" @click="showAdd"><span class="glyphicon glyphicon-pencil"></span>
							新增</button>
						<button type="button" class="btn btn-danger" :disabled="checkedId.length == 0" @click="removeBatch"><span class="glyphicon glyphicon-trash"></span>
							删除</button>
					</div>
				</form>
			</div>
			<!-- 表格 -->
			<div class="container-fluid">
				<table class="table table-bordered table-striped table-hover">
					<thead>
						<th><input type="checkbox" v-model="isCheckedAll" @click="checkedAll"></th>
						<!-- <th>ID</th> -->
						<th>机构编码</th>
						<th>机构代码</th>
						<th>机构名称</th>
						<th>行政类别</th>
						<th>行政区分</th>
						<th>地址</th>
						<th>邮政编码</th>
						<th>挂牌日期</th>
						<th>独立运行日期</th>
						<th>行政区类别</th>
						<th>编办批文日期</th>
						<th>机构行政级别</th>
						<th>机构性质</th>

						<th>操作</th>
					</thead>
					<tbody>
						<tr v-for="org of orgList" :key="org.id">
							<td><input type="checkbox" ref="cb" v-model="checkedId" :value="org.id" @click="checkedOne"></td>
							<td>{{org.orgno}}</td>
							<td>{{org.orgcode}}</td>
							<td>{{org.orgname}}</td>
							<td>{{org.exeTypeName}}</td>
							<td>{{org.areacode}}</td>
							<td>{{org.linkadd}}</td>
							<td>{{org.zipcode}}</td>
							<td>{{org.listingdate}}</td>

							<td>{{org.standalonedate}}</td>
							<td>{{org.areatypeName}}</td>
							<td>{{org.zbbdocdate}}</td>
							<td>{{org.orglevelName}}</td>
							<td>{{org.orgproName}}</td>

							<td>
								<button type="button" class="btn btn-info btn-xs" @click="showEdit(org.id)">编辑</button>
								<button type="button" class="btn btn-danger btn-xs" @click="remove(org.id)">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- 分页 -->
			<div class="container-fluid">
				<nav>
					<ul class="pagination">
						<li v-if="isFirst" class="disabled"><span>上一页</span></li>
						<li v-else><a @click="goPre">上一页</a></li>
						<li v-for="i of pages">
							<a @click="goPage(i)">{{i}}</a>
						</li>
						<li v-if="isLast" class="disabled"><span>下一页</span></li>
						<li v-else><a @click="goNext">下一页</a></li>

					</ul>
				</nav>
			</div>

			<!-- 新增窗体 -->
		<div id="addWin" class="modal fade" tabindex="-1" role="dialog">
		    <div class="modal-dialog" role="document">
		        <div class="modal-content" style="width: 800px">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		                <h4 class="modal-title">新增组织机构</h4>
		            </div>
		            <div class="modal-body">
		                <form id="addForm">
		                    <div class="row">
		                        <div class="form-group col-sm-4">
		                            <label>机构编码：</label>
		                            <input type="text" v-model="addForm.orgno" class="form-control">
		                        </div>
		                        <div class="form-group col-sm-4">
		                            <label>机构代码：</label>
		                            <input type="text" v-model="addForm.orgcode" class="form-control">
		                        </div>
		                        <div class="form-group col-sm-4">
		                            <label>机构名称：</label>
		                            <input type="text" v-model="addForm.orgname" class="form-control">
		                        </div>
		                    </div>
		                    <div class="row">
		                        <div class="form-group col-sm-4">
		                            <label>行政类别：</label>
		                            <select v-model="addForm.exetype" class="form-control">
		                                <option value="">--请选择--</option>
		                                <option value="1">卫生监督机构</option>
		                                <option value="2">行政部门</option>
		                                <option value="3">协作单位</option>
		                            </select>
		                        </div>
		                        <div class="form-group col-sm-4">
		                            <label>行政区划：</label>
		                            <input type="text" v-model="addForm.areacode" class="form-control">
		                        </div>
		                        <div class="form-group col-sm-4">
		                            <label>行政区类别：</label>
		                            <select v-model="addForm.areatype" class="form-control">
		                                <option value="">--请选择--</option>
		                                <option value="1">省</option>
		                                <option value="2">市</option>
		                                <option value="3">县级市</option>
		                                <option value="4">县</option>
		                                <option value="5">区</option>
		                            </select>
		                        </div>
		                    </div>
		                    <div class="row">
		                        <div class="form-group col-sm-4">
		                            <label>挂牌日期：</label>
		                            <input type="date" v-model="addForm.listingdate" class="form-control">
		                        </div>
		                        <div class="form-group col-sm-4">
		                            <label>独立运行日期：</label>
		                            <input type="date" v-model="addForm.standalonedate" class="form-control">
		                        </div>
		                        <div class="form-group col-sm-4">
		                            <label>编办批文日期：</label>
		                            <input type="date" v-model="addForm.zbbdocdate" class="form-control">
		                        </div>
		                    </div>
		                    <div class="form-group">
		                        <label>地址：</label>
		                        <input type="text" v-model="addForm.linkadd" class="form-control">
		                    </div>
		                    <div class="row">
		                        <div class="form-group col-sm-4">
		                            <label>邮政编码：</label>
		                            <input type="text" v-model="addForm.zipcode" class="form-control">
		                        </div>
		                        <div class="form-group col-sm-4">
		                            <label>机构行政级别：</label>
		                            <select v-model="addForm.orglevel" class="form-control">
		                                <option value="">--请选择--</option>
		                                <option value="1">厅局级</option>
		                                <option value="2">副厅局级</option>
		                                <option value="3">处级</option>
		                                <option value="4">副处级</option>
		                                <option value="5">科级</option>
		                                <option value="6">副科级</option>
		                                <option value="7">副科级以下</option>
		                                <option value="8">未定级</option>
		                            </select>
		                        </div>
		                        <div class="form-group col-sm-4">
		                            <label>机构性质：</label>
		                            <select v-model="addForm.orgpro" class="form-control">
		                                <option value="">--请选择--</option>
		                                <option value="1">行政机构</option>
		                                <option value="2">全额拨款事业单位</option>
		                                <option value="3">差额拨款事业单位</option>
		                                <option value="4">自收自支事务单位</option>
		                                <option value="5">其他</option>
		                            </select>
		                        </div>
		                    </div>
		                </form>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		                <button type="button" class="btn btn-primary" @click="add">确定</button>
		            </div>
		        </div>
		    </div>
		</div>
			<!-- 修改窗体 -->
			<div id="editWin" class="modal fade" tabindex="-1" role="dialog">
			    <div class="modal-dialog" role="document">
			        <div class="modal-content" style="width: 800px">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			                <h4 class="modal-title">修改组织机构</h4>
			            </div>
			            <div class="modal-body">
			                <form id="editForm">
			                    <div class="row">
			                        <div class="form-group col-sm-4">
			                            <label>机构编码：</label>
			                            <input type="text" v-model="editForm.orgno" class="form-control">
			                        </div>
			                        <div class="form-group col-sm-4">
			                            <label>机构代码：</label>
			                            <input type="text" v-model="editForm.orgcode" class="form-control">
			                        </div>
			                        <div class="form-group col-sm-4">
			                            <label>机构名称：</label>
			                            <input type="text" v-model="editForm.orgname" class="form-control">
			                        </div>
			                    </div>
			                    <div class="row">
			                        <div class="form-group col-sm-4">
			                            <label>行政类别：</label>
			                            <select v-model="editForm.exetype" class="form-control">
			                                <option value="">--请选择--</option>
			                                <option value="1">卫生监督机构</option>
			                                <option value="2">行政部门</option>
			                                <option value="3">协作单位</option>
			                            </select>
			                        </div>
			                        <div class="form-group col-sm-4">
			                            <label>行政区划：</label>
			                            <input type="text" v-model="editForm.areacode" class="form-control">
			                        </div>
			                        <div class="form-group col-sm-4">
			                            <label>行政区类别：</label>
			                            <select v-model="editForm.areatype" class="form-control">
			                                <option value="">--请选择--</option>
			                                <option value="1">省</option>
			                                <option value="2">市</option>
			                                <option value="3">县级市</option>
			                                <option value="4">县</option>
			                                <option value="5">区</option>
			                            </select>
			                        </div>
			                    </div>
			                    <div class="row">
			                        <div class="form-group col-sm-4">
			                            <label>挂牌日期：</label>
			                            <input type="date" v-model="editForm.listingdate" class="form-control">
			                        </div>
			                        <div class="form-group col-sm-4">
			                            <label>独立运行日期：</label>
			                            <input type="date" v-model="editForm.standalonedate" class="form-control">
			                        </div>
			                        <div class="form-group col-sm-4">
			                            <label>编办批文日期：</label>
			                            <input type="date" v-model="editForm.zbbdocdate" class="form-control">
			                        </div>
			                    </div>
			                    <div class="form-group">
			                        <label>地址：</label>
			                        <input type="text" v-model="editForm.linkadd" class="form-control">
			                    </div>
			                    <div class="row">
			                        <div class="form-group col-sm-4">
			                            <label>邮政编码：</label>
			                            <input type="text" v-model="editForm.zipcode" class="form-control">
			                        </div>
			                        <div class="form-group col-sm-4">
			                            <label>机构行政级别：</label>
			                            <select v-model="editForm.orglevel" class="form-control">
			                                <option value="">--请选择--</option>
			                                <option value="1">厅局级</option>
			                                <option value="2">副厅局级</option>
			                                <option value="3">处级</option>
			                                <option value="4">副处级</option>
			                                <option value="5">科级</option>
			                                <option value="6">副科级</option>
			                                <option value="7">副科级以下</option>
			                                <option value="8">未定级</option>
			                            </select>
			                        </div>
			                        <div class="form-group col-sm-4">
			                            <label>机构性质：</label>
			                            <select v-model="editForm.orgpro" class="form-control">
			                                <option value="">--请选择--</option>
			                                <option value="1">行政机构</option>
			                                <option value="2">全额拨款事业单位</option>
			                                <option value="3">差额拨款事业单位</option>
			                                <option value="4">自收自支事务单位</option>
			                                <option value="5">其他</option>
			                            </select>
			                        </div>
			                    </div>
			                </form>
			            </div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			                <button type="button" class="btn btn-primary" @click="edit">确定</button>
			            </div>
			        </div>
			    </div>
			</div>
			<!-----------------修改窗体结束---------------------->

		<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="../js/tools.js" type="text/javascript" charset="utf-8"></script> -->
		<script type="text/javascript">
			$(function() {
				$(':checkbox[name=cb]').click(function() {
					// selectOne();
				});
			})
		</script>
		<!--vuejs代码-->
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					pageName: '用户管理',
					// 存放用户列表数据
					orgList: [],
					orgSelectOneList: [],
					// 新增表单数据
					addForm: {
						orgno: '',
						orgcode: '',
						orgname: '',
						exetype: '',
						areacode: '',
						linkadd: '',
						zipcode: '',
						listingdate: '',
						standalonedate: '',
						areatype: '',
						zbbdocdate: '',
						orglevel: '',
						orgpro: ''
					},
					searchForm: {
						orgname: '',
						exetype: ''
					},
					// 修改表单数据
					editForm: {
						id: 0,
						orgno: '',
						orgcode: '',
						orgname: '',
						exetype: '',
						areacode: '',
						linkadd: '',
						zipcode: '',
						listingdate: '',
						standalonedate: '',
						areatype: '',
						zbbdocdate: '',
						orglevel: '',
						orgpro: ''
					},
					// 选中的编号
					isCheckedAll: false,
					checkedId: [],
					pageNum: 1,
					pageSize: 3,
					pages: 0,
					total: 0,
					isFirst: false,
					isLast: false
				},
				methods: {
					// 上一页
					goPre () {
						this.pageNum--
						this.find()
					},
					// 下一页
					goNext () {
						this.pageNum++
						this.find()
					},
					goPage (page) {
						this.pageNum = page
						this.find()
					},
					// 全选
					checkedAll() {
						// this.isCheckedAll = !this.isCheckedAll
						if (!this.isCheckedAll) {
							this.checkedId = this.orgList.map(item => item.id)
						} else {
							this.checkedId = []
						}
						console.log('========', this.checkedId, this.isCheckedAll)
					},
					// 选择一个
					checkedOne() {
						console.log('========', this.checkedId, this.isCheckedAll)
					},
					// 查询列表
					find() {
						$.ajax('http://localhost:8080/org/find', {
							type: 'get',
							data: {
								orgname: this.searchForm.orgname,
								exetype: this.searchForm.exetype,
								pageNum: this.pageNum,
								pageSize: this.pageSize
							},
							success: resp => {
								console.log('响应回来的数据', resp)
								if (resp.code == 200) {
									this.pageNum = resp.data.pageNum
									this.pageSize = resp.data.pageSize
									this.pages = resp.data.pages
									this.total = resp.data.total
									this.isFirst = resp.data.isFirst
									this.isLast = resp.data.isLast
									let orgList = resp.data.list
									this.orgList = orgList.map(item => {
										if (item.exetype == '1') {
											item.exeTypeName = '卫生监督机构'
										} else if (item.exetype == '2') {
											item.exeTypeName = '行政部门'
										} else {
											item.exeTypeName = '协作单位'
										}

										switch (item.areatype) {
											case '1':
												item.areatypeName = '省'
												break;
											case '2':
												item.areatypeName = '市'
												break;
											case '3':
												item.areatypeName = '县级市'
												break;
											case '4':
												item.areatypeName = '县'
												break;
											case '5':
												item.areatypeName = '区'
												break
										}
										switch (item.orglevel) {
											case '1':
												item.orglevelName = '厅局级'
												break;
											case '2':
												item.orglevelName = '副厅局级'
												break;
											case '3':
												item.orglevelName = '处级'
												break;
											case '4':
												item.orglevelName = '副处级'
												break;
											case '5':
												item.orglevelName = '科级'
												break
											case '6':
												item.orglevelName = '副科级'
												break
											case '7':
												item.orglevelName = '副科级以下'
												break
											case '8':
												item.orglevelName = '其他'
												break
										}
										switch (item.orgpro) {
											case '1':
												item.orgproName = '行政机构'
												break;
											case '2':
												item.orgproName = '全额拨款事业单位'
												break;
											case '3':
												item.orgproName = '差额拨款事业单位'
												break;
											case '4':
												item.orgproName = '自收自支事务单位'
												break;
											case '5':
												item.orgproName = '其他'
												break
										}

										return item
									})
								}
							}
						})
					},
					//请求查询条件
					clearSearch() {
						this.searchForm.orgname = ''
						this.searchForm.exetype = ''
						this.pageNum = 1
						this.find()
					},
					findById(id) {
						$.ajax('http://:8080/org/find/' + id, {
							type: 'get',
							data: {},
							success: resp => {
								console.log('响应回来的数据', resp.data)
								if (resp.code == 200) {
									this.editForm = resp.data
								}
							}
						})
					},
					// 打开新增窗体
					showAdd() {
						$('#addWin').modal('show')
					},
					// 新增
					add() {
						console.log('提交的数据:', this.addForm)
						// 异步请求提交表单数据
						$.ajax('http://localhost:8080/org/insert', {
							type: 'post',
							contentType: 'application/json',
							data: JSON.stringify(this.addForm),
							success: resp => {
								alert('新增成功')
								this.find()
								this.closeAddWin()
							},
							error: resp => {
								alert('新增失败')
								this.closeAddWin()
							}
						})
					},
					
					// 删除
					remove(id) {

						if (confirm('确认删除该条数据吗?')) {
							$.ajax('http://localhost:8080/org/delete/' + id, {
								type: 'delete',
								success: resp => {
									alert('删除成功' + id)
									this.find()
								},
								error: resp => {
									alert('删除失败')
								}
							})
						}
					},
					// 批量删除
					removeBatch() {
						if (confirm('确认删除该条数据吗?')) {
						 $.ajax(`http://localhost:8080/org/deletes/${this.checkedId}`,{
						                type: 'delete',
						                success: res => {
						                  if(res && res.code == 200){
						                    alert('批量删除成功')
						                    this.find()
						                  }
						                }
						              })
						              // 删除的异步请求
						              // alert('删除成功' + id)
						            }
					},
					// 打开新增窗体
					showEdit(id) {
						// this.editForm.id = id
						// this.findById(id)
						console.log('响应回来的数据', id)
						$.ajax('http://localhost:8080/org/find/' + id, {
							type: 'get',
							data: {},
							success: resp => {
								console.log('响应回来的数据', resp.data)
								if (resp.code == 200) {
									this.editForm = resp.data
									$('#editWin').modal('show')
								}
							}
						})
						console.log("===========", this.editForm)
						// 单条记录查询的异步请求
					},
					// 新增
					edit() {
						// 异步请求提交表单数据
						$.ajax('http://localhost:8080/org/update', {
							type: 'put',
							contentType: 'application/json',
							data: JSON.stringify(this.editForm),
							success: resp => {
								alert('编辑成功')
								this.find()
								this.closeEditWin()
							},
							error: resp => {
								alert('编辑失败')
								this.closeEditWin()
							}
						})
					},
					// 关闭新增窗体
					closeAddWin() {
						this.addForm = {
							orgno: '',
							orgcode: '',
							orgname: '',
							exetype: '',
							areacode: '',
							linkadd: '',
							zipcode: '',
							listingdate: '',
							standalonedate: '',
							areatype: '',
							zbbdocdate: '',
							orglevel: '',
							orgpro: ''
						}
						$('#addWin').modal('hide')
					},
					// 关闭编辑窗体
					closeEditWin() {
						this.editForm = {
							orgno: '',
							orgcode: '',
							orgname: '',
							exetype: '',
							areacode: '',
							linkadd: '',
							zipcode: '',
							listingdate: '',
							standalonedate: '',
							areatype: '',
							zbbdocdate: '',
							orglevel: '',
							orgpro: ''
						}
						$('#editWin').modal('hide')
					}
				},
				computed: {},
				watch: {
					// isCheckedAll (val) {
					// 	this.checkedId = val ? this.userList.map(item => item.id) : []
					// 	console.log('watch-isCheckedAll', val, this.checkedId)
					// },
					// checkedId (val) {
					// 	this.isCheckedAll = val.length == this.userList.length
					// }
				},
				created() {
					this.find()
				}

			})
		</script>
	</body>
</html>
